<template>

  <div class="mt-2 border-b pb-2">
    <div class="flex items-center justify-between">
      <div class="relative w-64 pr-2 border-2 rounded ml-2">
        <input type="text" v-model="storeIndex.Index.SearchText"
               class="w-full px-4 py-2 text-gray-700 bg-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               placeholder="搜索AI应用...">
        <span class="absolute inset-y-0 right-4 flex items-center pl-3">
                    <i class="fas fa-search text-gray-400 "></i>
      </span>


      </div>

      <div class="flex mr-4" style="font-size: 0.7rem">
                <span class="ml-auto">
                 <button @click="storeIndex.ParseUserTool()"
                         class="bg-cyan-5 mr-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
                        <i class="far fa-clipboard mr-1"></i>粘贴应用
                 </button>

                 <button @click="storeIndex.ShowUserToolAdd()"
                         class=" bg-blue-400 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
                        <i class="far fa-plus-square mr-1"></i>创造AI应用
                 </button>
                </span>
      </div>
    </div>
  </div>

  <!--  工具列表-->
  <div class="pt-2 px-2">
    <ToolsList></ToolsList>
  </div>


  <!-- 弹窗区域-->
  <q-dialog v-model="storeIndex.PopEditUserTool.IsShow"  no-backdrop-dismiss style="draggable:false">
    <div class="w-4/5 bg-white shadow-lg rounded-lg overflow-hidden"  draggable="false">
      <!-- 标题栏 -->
      <div class="flex items-center justify-between px-3 py-2 bg-cyan-3">
        <h3 class="text-sm font-medium text-gray-800">{{storeIndex.PopEditUserTool.CurrEditType == EditType.Update ? '修改' :'创造'}}AI应用</h3>
        <button class="text-gray-600 hover:text-gray-800 focus:outline-none" @click="closePopup">
          <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24">
            <path
                d="M18.7,6.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L7.7,6.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l4.3,4.3l-4.3,4.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l4.3-4.3l4.3,4.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L13.4,12l4.3-4.3C19.1,7.3,19.1,6.7,18.7,6.3z"></path>
          </svg>
        </button>
      </div>

      <!-- 主体区域 -->
      <div class="px-3 py-2">
        <edit-tool @close="closePopup"></edit-tool>
      </div>
    </div>
  </q-dialog>


</template>
<script setup lang="ts">
import ToolsList from "../layout/IndexList.vue";
import {onMounted, ref} from 'vue'
import EditTool from "../layout/IndexEdit.vue";
import {EditType, useIndexStore} from "../store";

let storeIndex = ref(useIndexStore())

onMounted(() => {
  storeIndex.value.GetList()
})


function closePopup() {
  storeIndex.value.CloseUserToolPopup()
}

</script>